<script setup lang="ts">
import {getUUID, get, post} from "@/utils";
import {onMounted, reactive, ref} from "vue";
import type {FormInstance} from "element-plus";
import router from "@/router";
import Cookies from "js-cookie";

const dataForm = reactive({
  	userName: '',
  	password: '',
	uuid: '',
	captcha: ''
});

const dataRule = {
  	userName: [
  		{ required: true, message: '请输入用户名', trigger: 'blur' },
  	],
  	password: [
  		{ required: true, message: '请输入密码', trigger: 'blur' },
  	],
	captcha: [
  		{ required: true, message: '请输入验证码', trigger: 'blur' },
  	],
};

let captchaPath = ref('');

// 登录
const dataFormRef = ref<FormInstance>();
const dataFormSubmit = () => {
	dataFormRef.value?.validate((valid) => {
		if (valid) {
			console.log(dataForm);
			post('renren-fast/' + '/sys/login', {
				username: dataForm.userName,
				password: dataForm.password,
				uuid: dataForm.uuid,
				captcha: dataForm.captcha
			}).then((loginRes: unknown) => {
				const res = loginRes as any;
				console.log(res);
				if (res  && res.code === 0) {
					// 登录成功
					Cookies.set('token', res.token);
					router.push({ name: 'home' })
				}
			}).catch(error => {
				console.error('登录失败:', error);
				getCaptcha(); // 刷新验证码
			});
		}
	});
};

// 获取验证码
const getCaptcha = () => {
	dataForm.uuid = getUUID();
	captchaPath.value = import.meta.env.VITE_BASE_URL + '/captcha.jpg?uuid=' + dataForm.uuid;
	console.log(captchaPath);
};

onMounted(() => {
	getCaptcha();
});
</script>

<template>
	<div class="site-wrapper site-page--login">
		<div class="site-content__wrapper">
			<div class="brand-info">
				<h2 class="brand-info__text">谷粒商城</h2>
				<p class="brand-info__intro">谷粒商城-基于renrenfast项目开发</p>
			</div>
			<div class="login-main">
				<h3 class="login-title">管理员登录</h3>
					<el-form ref="dataFormRef" :model="dataForm" :rules="dataRule" @keyup.enter="dataFormSubmit()" status-icon>
						<el-form-item prop="userName">
							<el-input v-model="dataForm.userName" placeholder="用户名"></el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="dataForm.password" placeholder="密码" type="password"></el-input>
						</el-form-item>
						<el-form-item prop="captcha">
							<el-row :gutter="20">
								<el-col :span="14">
									<el-input v-model="dataForm.captcha" placeholder="验证码"></el-input>
								</el-col>
								<el-col :span="10" class="login-captcha">
									<img :src="captchaPath" @click="getCaptcha()" alt="验证码">
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item>
							<el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
						</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<style scoped>
.site-wrapper.site-page--login {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(38, 50, 56, .6);
	overflow: hidden;
	&:before {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		content: "";
		background-image: url(@/assets/img/login_bg.jpg);
		background-size: cover;
	}
	.site-content__wrapper {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 0;
		margin: 0;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: transparent;
	}
	.site-content {
		min-height: 100%;
		padding: 30px 500px 30px 30px;
	}
	.brand-info {
		margin: 220px 100px 0 90px;
		color: #fff;
	}
	.brand-info__text {
		margin:  0 0 22px 0;
		font-size: 48px;
		font-weight: 400;
		text-transform : uppercase;
	}
	.brand-info__intro {
		margin: 10px 0;
		font-size: 16px;
		line-height: 1.58;
		opacity: .6;
	}
	.login-main {
		position: absolute;
		top: 0;
		right: 0;
		padding: 150px 60px 180px;
		width: 470px;
		min-height: 100%;
		background-color: #fff;
	}
	.login-title {
		font-size: 16px;
	}
	.login-captcha {
		overflow: hidden;
		> img {
			width: 100%;
			cursor: pointer;
		}
	}
	.login-btn-submit {
		width: 100%;
		margin-top: 38px;
	}
}
</style>